<template>
	<view class="nav-bar status_bar">
		<view class="left" @click="backHandle">
			<slot name="left"></slot>
	    </view>
		<view class="title">
			<slot name="title"></slot>
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default{
		methods:{
			backHandle(){
				uni.navigateBack(-1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar{
		display: flex;
		align-items: center;
		background-image: linear-gradient(45deg, #0081ff, #1ab3f5);
		height:100rpx;
		justify-content: space-between;
		color:#fff;
		.title{
			font-size:36rpx;
			text-align: center;
			flex:4;
			white-space: nowrap;
			overflow:hidden;
			text-overflow: ellipsis;
		}
		.left{
			margin-left:30rpx;
			flex:1;
		}
		.right{
			margin-right:30rpx;
			flex:1;
			text-align:right;
		}
	}
	.status_bar {
		padding-top: var(--status-bar-height);
		width: 100%;
	}
</style>